<template>
    <div class="photolist">
        <!--1图片分类-->
        <div id="cate">
            <ul v-bind="{style:'width:'+ulwidth+'px'}">
                <li>全部</li>
                <li v-for='v in cates' @click='getimages(v.id)'>{{v.title}}</li>
            </ul>
        </div>
        <!--2图片列表-->
        <div id="imglist">
            <ul>
                <li v-for="item in list">
                    <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
                        <img v-lazy="item.img_url">
                        <div id="desc">
                            <h5 v-text="item.title"></h5>
                            <p v-text="item.zhaiyao"></p>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>

</template>
<script>
    import common from '../../kits/common'
    import {Toast} from 'mint-ui';
    export default{
        data(){
            return {
                cateid:0,
                ulwidth: 320,
                cates: [],
                list: []   //存储图片数据
            }
        },
        created(){
            this.getcates();
            this.getimages(this.cateid);
        },
        methods: {
//            changeCateid(id){
//                this.cateid=id;
//                console.log(this.cateid);
//            },
            getcates(){
                var url = common.apidomain + '/api/getimgcategory';
                this.$http.get(url).then(function (res) {
                    var data = res.body;
                    if (data.status != 0) {
                        Toast(data.message);
                        return;
                    }
                    this.cates = data.message;
                    //实现当前分类数据所在的ul的总宽度 = 分类个数 * 每个分类数据的宽度
                    var w = 62;
                    var count = res.body.message.length + 1;
                    this.ulwidth = w * count;
                })
            },
            getimages(cateid){
//                console.log(cateid);
                cateid=cateid||0;
                var url=common.apidomain + '/api/getimages/'+cateid;
                this.$http.get(url).then(function (res) {
                    var data=res.body;
                    if (data.status != 0) {
                        Toast(data.message);
                        return;
                    }
                    this.list = data.message;
                })
            }
        }
    }
</script>
<style scoped>
    /*1.0 图片分类*/
    #cate {
        /*width: 375px;*/
        max-width: 375px;
        overflow-x: auto;
    }

    #cate ul {
        margin: 0px;
        padding-left: 5px;
        height: 30px;
        line-height: 30px;
    }

    #cate li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        color: #0094ff;
        font-size: 14px;
        padding-left: 6px;
    }

    /*实现图片列表样式*/
    #imglist {

    }

    #imglist ul {
        padding-left: 0px;
    }

    #imglist li {
        list-style: none;
        position: relative;
    }

    #imglist img {
        width: 100%;
        height: 300px;
    }

    #desc {
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: 2px;
        left: 0px;
    }

    #desc h5 {
        color: #ffffff;
        font-weight: bold;
    }

    #desc p {
        color: #fff;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>